<template>
  <div class="TeacherTable_main_box_css">
    <div class="TeacherTable_content_box_css">
      <el-table :data="tableData" border style="width: 100vw;height: 80vh;" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="65"/>
        <el-table-column label="id" width="75">
          <template #default="scope">
            <div>
              <span>{{ scope.row.id }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="姓名" width="95">
          <template #default="scope">
            <div>
              <span>{{ scope.row.teacherName }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="头像" width="250">
          <template #default="scope">
            <div>
              <img :src="scope.row.teacherImage" style="width: 10vw;height: 20vh;"/>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="职位" width="130">
          <template #default="scope">
            <div>
              <span>{{ scope.row.teacherInformation }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="教师特点" width="115">
          <template #default="scope">
            <div>
              <span>{{ scope.row.teacherCharacteristic }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="教师简历" width="400">
          <template #default="scope">
            <div>
              <span>{{ scope.row.teacherIntroduce}}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="教师名言" width="215">
          <template #default="scope">
            <div>
              <span>{{ scope.row.teacherStyle}}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="250">
          <template #default="scope">
            <el-button size="small" @click="TeacherhandleEdit(scope.row.id, scope.row)" type="warning" style="width: 4vw; height: 3vh;"
              >修改</el-button
            >
            <el-button
              size="small"
              type="danger"
              @click="TeacherhandleDelete(scope.row.id, scope.row)" style="width: 4vw; height: 3vh;"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="TeacherTable_from_box_css" v-show="Teacher_From_Show">
      <div class="TeacherTable_from_content_box_css">
        <el-form :label-position="labelPosition" label-width="80px" :model="TeacherTableformLabelAlign" style="margin: 5vh auto;width: 75%;height: 90%;">
              <el-form-item label="教师名">
                <el-input v-model="TeacherTableformLabelAlign.teacher_name"></el-input>
              </el-form-item>
              <el-form-item label="教师自述">
                <el-input v-model="TeacherTableformLabelAlign.teacher_information"></el-input>
              </el-form-item>
              <el-form-item label="教师标签">
                <el-input v-model="TeacherTableformLabelAlign.teacher_characteristic"></el-input>
              </el-form-item>
              <el-form-item label="教师风格">
                <el-input v-model="TeacherTableformLabelAlign.teacher_style"></el-input>
              </el-form-item>
              <el-form-item label="教师简介">
                <el-input type="textarea" v-model="TeacherTableformLabelAlign.teacher_introduce"></el-input>
              </el-form-item>
              <el-form-item label="教师头像">
                <el-input v-model="TeacherTableformLabelAlign.teacher_image"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button size="small"  type="primary" style="width: 5vw;height: auto;" @click="updateGrade(TeacherTableformLabelAlign)">确定修改</el-button>
                <el-button size="small"  type="primary" style="width: 5vw;height: auto;" @click="TeacherdeleteEdit">放弃修改</el-button>
              </el-form-item>
            </el-form>
      </div>
    </div>
  </div>
</template>
    
    <script>
    import axios from 'axios'
    export default {
      name:'TeacherTable',
      data(){
        return{
          tableData:[
          ],
          Teacher_From_Show:false,
          teacher_id:0,
          TeacherTableformLabelAlign: {
            teacher_name: '',
            teacher_information: '',
            teacher_introduce: '',
            teacher_characteristic:'',
            teacher_style:'',
            teacher_image:''
        },
        }
      },
      methods:{
        TeacherhandleEdit(index,row){
          this.Teacher_From_Show=true
          this.teacher_id=index
          console.log(row)
          this.TeacherTableformLabelAlign.teacher_name=row.teacherName
          this.TeacherTableformLabelAlign.teacher_information=row.teacherInformation
          this.TeacherTableformLabelAlign.teacher_introduce=row.teacherIntroduce
          this.TeacherTableformLabelAlign.teacher_characteristic=row.teacherCharacteristic
          this.TeacherTableformLabelAlign.teacher_style=row.teacherStyle
          this.TeacherTableformLabelAlign.teacher_image=row.teacherImage
        },
        TeacherhandleDelete(index,row){
          axios.get('http://127.0.0.1/DeleteTeacher',{params:{
            TeacherId:index
          }}).then(function(res){
            console.log(res.data)
            if(res.data==1){
              alert("删除成功")
              that.$router.go(0)
            }else{
              alert("删除失败")
            }
          }).catch(function(error){
            alert("系统出错")
          })
        },
        TeacherhandleSelectionChange(val){
          console.log(val)
        },
        TeacherdeleteEdit(){
          this.Teacher_From_Show=false
        },
        updateGrade(TeacherTableformLabelAlign){
          console.log(this.teacher_id)
          var that=this
          axios.get('http://127.0.0.1/UpdateTeahcer',{params:{
            id:that.teacher_id,
            teacherImage:TeacherTableformLabelAlign.teacher_image,
            teacherName:TeacherTableformLabelAlign.teacher_name,
            teacherInformation:TeacherTableformLabelAlign.teacher_information,
            teacherIntroduce:TeacherTableformLabelAlign.teacher_introduce,
            teacherCharacteristic:TeacherTableformLabelAlign.teacher_characteristic,
            teacherStyle:TeacherTableformLabelAlign.teacher_style.teacher_style,
          }}).then(function(res){
            console.log(res.data)
            if(res.data==1){
              alert("修改成功")
              that.$router.go(0)
            }else{
              alert("修改失败")
            }
          }).catch(function(error){
            console.log(error)
            alert("系统出错")
          })
        }
    },
    mounted(){
      var that=this
      axios.get('http://127.0.0.1/Teacher')
      .then(function(res){
        for(var i=0;i<res.data.length;i++){
          that.tableData.push(res.data[i])
        }
      })
      .catch(function(error){
        console.log(error)
      })
    }
  }
    </script>
<style>
  .TeacherTable_main_box_css{
    position: relative;
    width: 83vw;
    height: 86vh;
  }
  .TeacherTable_content_box_css{
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
  }
  .TeacherTable_from_box_css{
    position: absolute;
    z-index: 2;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
  }
  .TeacherTable_from_content_box_css{
    position: absolute;
    top:7vh;
    left: 24vw;
    width: 40%;
    height: 85%;
    background-color: #fff;
    border: 1px solid rgba(0,0,0,.1);
    border-radius: 5px;
  }
</style>